<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue商城</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 5%;
            height: 70px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            transition: all 0.3s ease;
            padding: 8px 12px;
            border-radius: 4px;
        }
        
        .nav-links a:hover, .nav-links a.active {
            background: rgba(255, 255, 255, 0.2);
        }
        
        /* 页面内容区域 */
        .page-content {
            display: none;
            padding: 30px 0;
            min-height: calc(100vh - 180px);
        }
        
        .page-content.active {
            display: block;
        }
        
        /* 英雄区域样式 */
        .hero {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 60px 5%;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 12px;
            margin-bottom: 40px;
        }
        
        .hero-content {
            max-width: 50%;
        }
        
        .hero-content h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero-content p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .btn {
            padding: 12px 30px;
            background: white;
            color: #6a11cb;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .hero-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            color: #333;
            width: 300px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .hero-card h3 {
            color: #2575fc;
            margin-bottom: 10px;
        }
        
        /* 功能区域样式 */
        .features {
            padding: 80px 5%;
            text-align: center;
        }
        
        .section-title {
            font-size: 36px;
            margin-bottom: 60px;
            color: #333;
            position: relative;
            text-align: center;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            border-radius: 2px;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }
        
        .feature-card {
            background: white;
            padding: 30px 20px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 40px;
            margin-bottom: 20px;
            color: #6a11cb;
        }
        
        .feature-card h3 {
            margin-bottom: 15px;
            font-size: 20px;
        }
        
        .feature-card p {
            color: #666;
            line-height: 1.6;
        }
        
        /* 产品区域样式 */
        .products {
            padding: 40px 0;
        }
        
        .products-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }
        
        .view-all {
            color: #2575fc;
            text-decoration: none;
            font-weight: bold;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }
        
        .product-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .product-image {
            height: 200px;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 40px;
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-info h3 {
            margin-bottom: 10px;
            font-size: 18px;
        }
        
        .product-price {
            color: #2575fc;
            font-size: 22px;
            font-weight: bold;
            margin: 15px 0;
        }
        
        .product-info .btn {
            width: 100%;
            text-align: center;
            padding: 10px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
        }
        
        /* 搜索和分类区域 */
        .search-section {
            padding: 40px 0;
            background: white;
            border-radius: 10px;
            margin-bottom: 40px;
        }
        
        .search-box {
            display: flex;
            max-width: 800px;
            margin: 0 auto 30px;
        }
        
        .search-input {
            flex: 1;
            padding: 15px 20px;
            border: 2px solid #e0e0e0;
            border-radius: 30px 0 0 30px;
            font-size: 16px;
            outline: none;
        }
        
        .search-btn {
            padding: 0 25px;
            background: #2575fc;
            color: white;
            border: none;
            border-radius: 0 30px 30px 0;
            cursor: pointer;
            font-size: 18px;
        }
        
        .categories {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .category-btn {
            padding: 8px 20px;
            background: #f0f0f0;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .category-btn.active {
            background: #2575fc;
            color: white;
        }
        
        /* 产品详情页样式 */
        .product-detail {
            display: flex;
            gap: 40px;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }
        
        .product-gallery {
            flex: 1;
        }
        
        .product-gallery img {
            width: 100%;
            border-radius: 10px;
        }
        
        .product-info-detail {
            flex: 1;
        }
        
        .product-title {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .product-category {
            color: #666;
            margin-bottom: 20px;
            display: block;
        }
        
        .rating {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .stars {
            color: #ffc107;
            margin-right: 10px;
        }
        
        .reviews {
            color: #666;
        }
        
        .price-container {
            margin: 20px 0;
        }
        
        .current-price {
            font-size: 32px;
            color: #2575fc;
            font-weight: bold;
        }
        
        .original-price {
            font-size: 20px;
            color: #999;
            text-decoration: line-through;
            margin-left: 10px;
        }
        
        .discount {
            background: #ff4757;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 14px;
            margin-left: 10px;
        }
        
        .features-list {
            margin: 20px 0;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .feature-icon {
            margin-right: 10px;
            color: #6a11cb;
        }
        
        /* 平台介绍页样式 */
        .about-hero {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
            border-radius: 10px;
            margin-bottom: 40px;
        }
        
        .about-hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .about-hero p {
            font-size: 20px;
            max-width: 700px;
            margin: 0 auto;
            opacity: 0.9;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            margin: 60px 0;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .stat-label {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .story-section {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 40px;
        }
        
        .story-section h2 {
            font-size: 32px;
            margin-bottom: 20px;
            color: #333;
        }
        
        .story-section p {
            font-size: 18px;
            line-height: 1.6;
            color: #666;
            margin-bottom: 20px;
        }
        
        .team-section {
            margin: 60px 0;
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .team-member {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            text-align: center;
        }
        
        .team-member img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 20px;
        }
        
        .team-member h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }
        
        .team-member .role {
            color: #2575fc;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .team-member p {
            color: #666;
            line-height: 1.6;
        }
        
        .history-section {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 40px;
        }
        
        .history-item {
            display: flex;
            margin-bottom: 40px;
        }
        
        .history-date {
            min-width: 120px;
            background: #6a11cb;
            color: white;
            padding: 10px;
            border-radius: 30px;
            text-align: center;
            height: 40px;
            margin-right: 20px;
        }
        
        .history-content {
            flex: 1;
        }
        
        /* 联系我们页样式 */
        .contact-section {
            display: flex;
            gap: 40px;
        }
        
        .contact-info {
            flex: 1;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }
        
        .contact-form {
            flex: 1;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .contact-icon {
            width: 50px;
            height: 50px;
            background: #6a11cb;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
        }
        
        .contact-text h3 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        
        .form-group textarea {
            min-height: 150px;
        }
        
        /* 页脚样式 */
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 30px 5%;
            margin-top: 80px;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .products-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 900px) {
            .features-grid, .team-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .hero-content {
                max-width: 100%;
                text-align: center;
                margin-bottom: 40px;
            }
            
            .hero, .product-detail, .contact-section {
                flex-direction: column;
            }
        }
        
        @media (max-width: 600px) {
            .features-grid, .team-grid, .products-grid {
                grid-template-columns: 1fr;
            }
            
            .stats {
                flex-direction: column;
                gap: 30px;
            }
            
            .nav-links {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">Vue商城</div>
        <div class="nav-links">
            <a href="#" class="nav-link active" data-page="home">首页</a>
            <a href="#" class="nav-link" data-page="products">产品列表</a>
            <a href="#" class="nav-link" data-page="about">平台介绍</a>
            <a href="#" class="nav-link" data-page="contact">联系我们</a>
        </div>
    </nav>

    <div class="container">
        <!-- 首页内容 -->
        <div id="home" class="page-content active">
            <!-- 英雄区域 -->
            <section class="hero">
                <div class="hero-content">
                    <h1>欢迎来到Vue商城</h1>
                    <p>发现最优质的产品，享受最佳的购物体验</p>
                    <button class="btn">立即购物</button>
                </div>
                <div class="hero-card">
                    <h3>精选产品</h3>
                    <p>品质保证</p>
                </div>
            </section>

            <!-- 功能区域 -->
            <section class="features">
                <h2 class="section-title">为什么选择我们</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-gem"></i>
                        </div>
                        <h3>精选商品</h3>
                        <p>我们精心挑选每一件商品，确保品质优良</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-shipping-fast"></i>
                        </div>
                        <h3>快速配送</h3>
                        <p>24小时内发货，全国范围内快速送达</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-award"></i>
                        </div>
                        <h3>品质保证</h3>
                        <p>100%正品保证，不满意可退换</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h3>贴心服务</h3>
                        <p>24/7客户服务，随时为您解答疑问</p>
                    </div>
                </div>
            </section>

            <!-- 搜索区域 -->
            <section class="search-section">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索产品...">
                    <button class="search-btn"><i class="fas fa-search"></i></button>
                </div>
                <div class="categories">
                    <button class="category-btn active" data-category="all">全部</button>
                    <button class="category-btn" data-category="electronics">电子产品</button>
                    <button class="category-btn" data-category="clothing">服装</button>
                    <button class="category-btn" data-category="home">家居</button>
                    <button class="category-btn" data-category="sports">运动</button>
                    <button class="category-btn" data-category="books">书籍</button>
                </div>
            </section>

            <!-- 产品区域 -->
            <section class="products">
                <div class="products-header">
                    <h2 class="section-title">热门产品</h2>
                    <a href="#" class="view-all">查看全部产品</a>
                </div>
                <div class="products-grid">
                    <div class="product-card" data-category="electronics">
                        <div class="product-image">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <div class="product-info">
                            <h3>智能手机</h3>
                            <div class="product-price">¥2999</div>
                            <button class="btn view-product" data-id="1">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="electronics">
                        <div class="product-image">
                            <i class="fas fa-headphones"></i>
                        </div>
                        <div class="product-info">
                            <h3>无线耳机</h3>
                            <div class="product-price">¥599</div>
                            <button class="btn view-product" data-id="2">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="electronics">
                        <div class="product-image">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="product-info">
                            <h3>智能手表</h3>
                            <div class="product-price">¥1299</div>
                            <button class="btn view-product" data-id="3">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="electronics">
                        <div class="product-image">
                            <i class="fas fa-laptop"></i>
                        </div>
                        <div class="product-info">
                            <h3>笔记本电脑</h3>
                            <div class="product-price">¥6999</div>
                            <button class="btn view-product" data-id="4">查看详情</button>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- 产品列表页 -->
        <div id="products" class="page-content">
            <div class="search-section">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索产品...">
                    <button class="search-btn"><i class="fas fa-search"></i></button>
                </div>
                <div class="categories">
                    <button class="category-btn active" data-category="all">全部</button>
                    <button class="category-btn" data-category="electronics">电子产品</button>
                    <button class="category-btn" data-category="clothing">服装</button>
                    <button class="category-btn" data-category="home">家居</button>
                    <button class="category-btn" data-category="sports">运动</button>
                    <button class="category-btn" data-category="books">书籍</button>
                </div>
            </div>

            <div class="products">
                <h2 class="section-title">所有产品</h2>
                <div class="products-grid">
                    <!-- 电子产品 -->
                    <div class="product-card" data-category="electronics">
                        <div class="product-image">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <div class="product-info">
                            <h3>智能手机</h3>
                            <div class="product-price">¥2999</div>
                            <button class="btn view-product" data-id="1">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="electronics">
                        <div class="product-image">
                            <i class="fas fa-headphones"></i>
                        </div>
                        <div class="product-info">
                            <h3>无线耳机</h3>
                            <div class="product-price">¥599</div>
                            <button class="btn view-product" data-id="2">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="electronics">
                        <div class="product-image">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="product-info">
                            <h3>智能手表</h3>
                            <div class="product-price">¥1299</div>
                            <button class="btn view-product" data-id="3">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="electronics">
                        <div class="product-image">
                            <i class="fas fa-laptop"></i>
                        </div>
                        <div class="product-info">
                            <h3>笔记本电脑</h3>
                            <div class="product-price">¥6999</div>
                            <button class="btn view-product" data-id="4">查看详情</button>
                        </div>
                    </div>
                    
                    <!-- 服装 -->
                    <div class="product-card" data-category="clothing">
                        <div class="product-image">
                            <i class="fas fa-tshirt"></i>
                        </div>
                        <div class="product-info">
                            <h3>纯棉T恤</h3>
                            <div class="product-price">¥99</div>
                            <button class="btn view-product" data-id="5">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="clothing">
                        <div class="product-image">
                            <i class="fas fa-vest"></i>
                        </div>
                        <div class="product-info">
                            <h3>牛仔裤</h3>
                            <div class="product-price">¥199</div>
                            <button class="btn view-product" data-id="6">查看详情</button>
                        </div>
                    </div>
                    
                    <!-- 家居 -->
                    <div class="product-card" data-category="home">
                        <div class="product-image">
                            <i class="fas fa-couch"></i>
                        </div>
                        <div class="product-info">
                            <h3>沙发</h3>
                            <div class="product-price">¥2999</div>
                            <button class="btn view-product" data-id="7">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="home">
                        <div class="product-image">
                            <i class="fas fa-blender"></i>
                        </div>
                        <div class="product-info">
                            <h3>榨汁机</h3>
                            <div class="product-price">¥299</div>
                            <button class="btn view-product" data-id="8">查看详情</button>
                        </div>
                    </div>
                    
                    <!-- 运动 -->
                    <div class="product-card" data-category="sports">
                        <div class="product-image">
                            <i class="fas fa-basketball-ball"></i>
                        </div>
                        <div class="product-info">
                            <h3>篮球</h3>
                            <div class="product-price">¥199</div>
                            <button class="btn view-product" data-id="9">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="sports">
                        <div class="product-image">
                            <i class="fas fa-dumbbell"></i>
                        </div>
                        <div class="product-info">
                            <h3>哑铃</h3>
                            <div class="product-price">¥299</div>
                            <button class="btn view-product" data-id="10">查看详情</button>
                        </div>
                    </div>
                    
                    <!-- 书籍 -->
                    <div class="product-card" data-category="books">
                        <div class="product-image">
                            <i class="fas fa-book"></i>
                        </div>
                        <div class="product-info">
                            <h3>Vue.js实战</h3>
                            <div class="product-price">¥89</div>
                            <button class="btn view-product" data-id="11">查看详情</button>
                        </div>
                    </div>
                    <div class="product-card" data-category="books">
                        <div class="product-image">
                            <i class="fas fa-book-open"></i>
                        </div>
                        <div class="product-info">
                            <h3>JavaScript高级程序设计</h3>
                            <div class="product-price">¥129</div>
                            <button class="btn view-product" data-id="12">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品详情页 -->
        <div id="product-detail" class="page-content">
            <div class="product-detail">
                <div class="product-gallery">
                    <div class="product-image" style="height: 400px;">
                        <i class="fas fa-mobile-alt" style="font-size: 120px;"></i>
                    </div>
                </div>
                <div class="product-info-detail">
                    <h1 class="product-title">智能手机</h1>
                    <span class="product-category">电子产品</span>
                    
                    <div class="rating">
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                        <span class="reviews">(4.8) 256条评价</span>
                    </div>
                    
                    <div class="price-container">
                        <span class="current-price">￥2999</span>
                        <span class="original-price">￥3299</span>
                        <span class="discount">优惠300</span>
                    </div>
                    
                    <div class="features-list">
                        <h3>产品特性</h3>
                        <div class="feature-item">
                            <i class="fas fa-check-circle feature-icon"></i>
                            <span>5G网络支持</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-check-circle feature-icon"></i>
                            <span>无线充电</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-check-circle feature-icon"></i>
                            <span>IP68防水</span>
                        </div>
                    </div>
                    
                    <button class="btn" style="width: 100%;">加入购物车</button>
                </div>
            </div>
        </div>

        <!-- 平台介绍页 -->
        <div id="about" class="page-content">
            <div class="about-hero">
                <h1>关于Vue商城</h1>
                <p>致力于为用户提供最优质的购物体验和服务</p>
                
                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-number">10W+</div>
                        <div class="stat-label">注册用户</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">5000+</div>
                        <div class="stat-label">精选商品</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">99%</div>
                        <div class="stat-label">用户满意度</div>
                    </div>
                </div>
            </div>
            
            <div class="story-section">
                <h2>我们的故事</h2>
                <p>Vue商城成立于2023年，是一家专注于为用户提供高品质购物体验的电商平台。我们相信技术能够改变生活，让购物变得更加简单、便捷和愉悦。</p>
                <p>从创立之初，我们就坚持以用户为中心，严格筛选每一件商品，确保品质优良。我们的团队由电商行业的资深专家和技术精英组成，致力于通过技术创新提升用户的购物体验。</p>
            </div>
            
            <div class="history-section">
                <h2 class="section-title">发展历程</h2>
                
                <div class="history-item">
                    <div class="history-date">2023.01</div>
                    <div class="history-content">
                        <h3>平台创立</h3>
                        <p>Vue商城正式成立，开始搭建核心技术团队</p>
                    </div>
                </div>
                
                <div class="history-item">
                    <div class="history-date">2023.03</div>
                    <div class="history-content">
                        <h3>产品上线</h3>
                        <p>Vue商城1.0版本正式上线，首批上线1000+商品</p>
                    </div>
                </div>
                
                <div class="history-item">
                    <div class="history-date">2023.06</div>
                    <div class="history-content">
                        <h3>用户突破</h3>
                        <p>注册用户突破5万人，日活跃用户达到1万人</p>
                    </div>
                </div>
            </div>
            
            <div class="team-section">
                <h2 class="section-title">核心团队</h2>
                
                <div class="team-grid">
                    <div class="team-member">
                        <div class="product-image" style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-user" style="font-size: 40px;"></i>
                        </div>
                        <h3>张三</h3>
                        <div class="role">创始人 & CEO</div>
                        <p>10年电商行业经验，专注于用户体验和商业模式创新。</p>
                    </div>
                    
                    <div class="team-member">
                        <div class="product-image" style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-user" style="font-size: 40px;"></i>
                        </div>
                        <h3>李四</h3>
                        <div class="role">技术总监</div>
                        <p>资深全栈工程师，负责平台技术架构和产品开发。</p>
                    </div>
                    
                    <div class="team-member">
                        <div class="product-image" style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-user" style="font-size: 40px;"></i>
                        </div>
                        <h3>王五</h3>
                        <div class="role">运营总监</div>
                        <p>丰富的电商运营经验，擅长用户增长和市场推广策略。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 联系我们页 -->
        <div id="contact" class="page-content">
            <h2 class="section-title">联系我们</h2>
            
            <div class="contact-section">
                <div class="contact-info">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-text">
                            <h3>邮箱地址</h3>
                            <p>contact@vueshop.com</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div class="contact-text">
                            <h3>客服热线</h3>
                            <p>400-888-9999</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h3>公司地址</h3>
                            <p>北京市朝阳区科技园区创新大厦</p>
                        </div>
                    </div>
                </div>
                
                <div class="contact-form">
                    <h3>留言板</h3>
                    
                    <div class="form-group">
                        <label for="name">您的姓名</label>
                        <input type="text" id="name" placeholder="请输入您的姓名">
                    </div>
                    
                    <div class="form-group">
                        <label for="email">邮箱地址</label>
                        <input type="email" id="email" placeholder="请输入您的邮箱地址">
                    </div>
                    
                    <div class="form-group">
                        <label for="message">留言内容</label>
                        <textarea id="message" placeholder="请输入您的留言内容"></textarea>
                    </div>
                    
                    <button class="btn" style="width: 100%;">发送消息</button>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p>© 2023 Vue商城 - 所有权利保留</p>
    </footer>

    <script>
        // 页面导航功能
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const pageId = this.getAttribute('data-page');
                
                // 更新导航激活状态
                document.querySelectorAll('.nav-link').forEach(item => {
                    item.classList.remove('active');
                });
                this.classList.add('active');
                
                // 显示对应页面
                document.querySelectorAll('.page-content').forEach(page => {
                    page.classList.remove('active');
                });
                document.getElementById(pageId).classList.add('active');
            });
        });
        
        // 分类切换功能
        document.querySelectorAll('.category-btn').forEach(button => {
            button.addEventListener('click', function() {
                const category = this.getAttribute('data-category');
                
                // 更新按钮激活状态
                document.querySelectorAll('.category-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                this.classList.add('active');
                
                // 显示对应分类的产品
                document.querySelectorAll('.product-card').forEach(card => {
                    if (category === 'all' || card.getAttribute('data-category') === category) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
        
        // 查看产品详情功能
        document.querySelectorAll('.view-product').forEach(button => {
            button.addEventListener('click', function() {
                const productId = this.getAttribute('data-id');
                
                // 隐藏所有页面
                document.querySelectorAll('.page-content').forEach(page => {
                    page.classList.remove('active');
                });
                
                // 显示产品详情页
                document.getElementById('product-detail').classList.add('active');
                
                // 更新导航激活状态
                document.querySelectorAll('.nav-link').forEach(item => {
                    item.classList.remove('active');
                });
            });
        });
        
        // 产品卡片悬停效果增强
        document.querySelectorAll('.product-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
                this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.05)';
            });
        });
    </script>
</body>
</html>